<template>
  <div style="flex: 5">
    <el-table
      :data="priceInfos"
      border
      style="width: 100%"
      max-height="650px"
      table-layout="auto"
    >
      <el-table-column type="index" label="序号" sortable width="60px" />
      <el-table-column prop="KEKO_MATNR" label="图号" sortable />
      <el-table-column prop="MAKT_MAKTX" label="名称" sortable />
      <el-table-column
        prop="KEPH_KST001"
        label="材料成本"
        sortable
        :formatter="formatter"
      />
      <el-table-column
        prop="KEPH_MANUFACTURE"
        label="制造成本"
        sortable
        :formatter="formatter"
      />
      <el-table-column
        prop="KEPH_DEPRECITION"
        label="折旧费"
        sortable
        :formatter="formatter"
      />
      <el-table-column
        prop="KEPH_OTHER"
        label="其他成本"
        sortable
        :formatter="formatter"
      />
      <el-table-column
        prop="KEPH_SUM"
        label="总成本"
        sortable
        :formatter="formatter"
      />
    </el-table>
  </div>
</template>

<script setup>
import { nextTick, ref, defineProps, watch } from "vue";

let props = defineProps({
  items: ref(),
  paneName: ref(),
  activeName: ref(),
});
</script>

<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";

export default {
  data() {
    return {
      isSearching: false,
      priceInfos: [],
    };
  },
  mounted: function () {
    //this.initPieChart("pieChart2");
    // 页面加载完成后调用初始化函数
    console.log("mounted222");
    console.log("bomInfo => ", this.items);
    this.loadPartPrices();
    this.$emit("setMultiSelect", true);
  },
  created() {
    watch(
      () => this.items,
      (newData, oldData) => {
        console.log("items =>", newData, oldData);
        this.loadPartPrices();
      }
    ),
      watch(
        () => this.activeName,
        (newName, curName) => {
          console.log("newName ==>" + newName);
          if (newName == this.paneName) {
            this.loadPartPrices();
          }
        }
      );
  },
  methods: {
    test() {
      console.log("test");
    },
    loadPartPrices() {
      console.log("查询批量价格信息");
      this.isSearching = true;
      const uids = this.items.map((item) => item.item_revision_uid).join(",");
      const url = "/getPartPricesByUids?uids=" + uids;
      console.log(url);
      this.$http
        .get(url)
        .then((response) => {
          console.log(response.data);
          this.priceInfos = response.data;
          this.isSearching = false;
        })
        .catch((error) => {
          this.isSearching = false;
          console.log(error);
        });
    },
    formatter(row, column, cellValue) {
      if (typeof cellValue === "number") {
        return cellValue.toFixed(2); // 保留小数点后两位
      } else {
        return cellValue; // 其他类型的数据原样返回
      }
    },
  },
};
</script>

<!-- <script lang="ts" setup>
const itemCosts = [
  {
    code: "JPV50C:F",
    name: "JPV50C:F",
    quantity: 1,
    procurementType: "E50",
    sumCost: 14730.66,
    unitCost: 14730.66,
    materialCost: 11170.54,
    laborCost: 2118.26,
    otherCost: 1441.86,
    elapsedTime: 120,
    supplier: "富士康",
  },
  {
    code: "DSB5C0810AC(W)",
    name: "DSB5C0810AC(W)",
    quantity: 1,
    procurementType: "E",
    sumCost: 70.1,
    unitCost: 70.1,
    materialCost: 51.81,
    laborCost: 12.83,
    otherCost: 6.46,
    elapsedTime: 1.4,
    supplier: "富士康",
  },
];

const tableData = [
  {
    materialCost: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script> -->
